<template>
  <section class="append">
    <ul>
      <li>
        <span>题目类型:</span>
        <el-select v-model="questionInfo.optionValue" placeholder="请选择题型" class="w150">
          <el-option
              v-for="item in questionInfo.questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li v-if="questionInfo.optionValue === '选择题'">
        <span>所属科目：</span>
        <el-input
            placeholder="请输入对应科目"
            v-model="questionInfo.choiceQuestion.subject"
            class="w150"
            clearable>
        </el-input>
      </li>
      <li v-if="questionInfo.optionValue === '填空题'">
        <span>所属科目：</span>
        <el-input
            placeholder="请输入对应科目"
            v-model="questionInfo.fillQuestion.subject"
            class="w150"
            clearable>
        </el-input>
      </li>
      <li v-if="questionInfo.optionValue === '判断题'">
        <span>所属科目：</span>
        <el-input
            placeholder="请输入对应科目"
            v-model="questionInfo.judgeQuestion.subject"
            class="w150"
            clearable>
        </el-input>
      </li>
      <li v-if="questionInfo.optionValue === '选择题'">
        <span>分数：</span>
        <el-input
            placeholder="该题分数，默认为3"
            v-model="questionInfo.choiceQuestion.score"
            class="w150"
            clearable>
        </el-input>
      </li>
      <li v-if="questionInfo.optionValue === '填空题'">
        <span>分数：</span>
        <el-input
            placeholder="该题分数，默认为2"
            v-model="questionInfo.fillQuestion.score"
            class="w150"
            clearable>
        </el-input>
      </li>
      <li v-if="questionInfo.optionValue === '判断题'">
        <span>分数：</span>
        <el-input
            placeholder="该题分数，默认为2"
            v-model="questionInfo.judgeQuestion.score"
            class="w150"
            clearable>
        </el-input>
      </li>
    </ul>
    <!-- 选择题部分 -->
    <div class="change" v-if="questionInfo.optionValue === '选择题'">
      <div class="title">
        <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
        <el-input
            type="textarea"
            rows="4"
            v-model="questionInfo.choiceQuestion.question"
            placeholder="请输入题目内容"
            resize="none"
            class="answer">
        </el-input>
      </div>
      <div class="options">
        <ul>
          <li>
            <el-tag type="success">A</el-tag>
            <el-input
                placeholder="请输入选项A的内容"
                v-model="questionInfo.choiceQuestion.optionA"
                clearable="">
            </el-input>
          </li>
          <li>
            <el-tag type="success">B</el-tag>
            <el-input
                placeholder="请输入选项B的内容"
                v-model="questionInfo.choiceQuestion.optionB"
                clearable="">
            </el-input>
          </li>
          <li>
            <el-tag type="success">C</el-tag>
            <el-input
                placeholder="请输入选项C的内容"
                v-model="questionInfo.choiceQuestion.optionC"
                clearable>
            </el-input>
          </li>
          <li>
            <el-tag type="success">D</el-tag>
            <el-input
                placeholder="请输入选项D的内容"
                v-model="questionInfo.choiceQuestion.optionD"
                clearable>
            </el-input>
          </li>
        </ul>
      </div>
      <div style="margin: 15px">
        <span>正确选项:</span>
        <el-select v-model="questionInfo.choiceQuestion.answer" placeholder="选择正确答案" class="w150">
          <el-option
              v-for="item in questionInfo.rights"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="title">
        <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
        <el-input
            type="textarea"
            rows="4"
            v-model="questionInfo.choiceQuestion.analysis"
            placeholder="请输入答案解析"
            resize="none"
            class="answer">
        </el-input>
      </div>
      <div class="submit">
        <el-button type="primary" @click="choiceSubmit()">立即添加</el-button>
      </div>
    </div>
    <!-- 填空题部分 -->
    <div class="change fill" v-if="questionInfo.optionValue === '填空题'">
      <el-form :model="questionInfo.fillQuestion" ref="fillRef">
        <div class="title">
          <el-form-item prop="question"
                        :rules="[{validator: checkFillQuestion, trigger: 'change'}]">
            <el-tag>题目:</el-tag><span>在下面的输入框中输入题目,注意需要考生答题部分一定要用括号（英文半角）括起来。</span>
            <el-input
                type="textarea"
                rows="4"
                v-model="questionInfo.fillQuestion.question"
                placeholder="请输入题目内容"
                resize="none"
                class="answer">
            </el-input>
          </el-form-item>
        </div>
        <div class="fillAnswer">
          <el-form-item prop="answer"
                        :rules="[{validator: checkFillAnswer, trigger: 'change'}]">
            <el-tag>正确答案:</el-tag><span>若多个空请用逗号（英文半角）隔开，每个空若有多个答案请用/隔开</span>
            <el-input v-model="questionInfo.fillQuestion.answer"></el-input>
          </el-form-item>
        </div>
        <div class="title analysis">
          <el-tag type="success">解析:</el-tag><span>下方输入框中输入答案解析</span>
          <el-input
              type="textarea"
              rows="4"
              v-model="questionInfo.fillQuestion.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
          </el-input>
        </div>
        <div class="submit">
          <el-button type="primary" @click="fillSubmit()">立即添加</el-button>
        </div>
      </el-form>
    </div>
    <!-- 判断题 -->
    <div class="change judge" v-if="questionInfo.optionValue === '判断题'">
      <el-form ref="judgeRef" :model="questionInfo.judgeQuestion">
        <div class="title">
          <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
          <el-input
              type="textarea"
              rows="4"
              v-model="questionInfo.judgeQuestion.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
          </el-input>
        </div>
        <div class="judgeAnswer">
          <el-form-item prop="answer"
                        :rules="[{required: true, message: '正确答案不能为空', trigger: 'change'}]">
            <el-radio-group v-model="questionInfo.judgeQuestion.answer">
              <el-radio label="T">正确</el-radio>
              <el-radio label="F">错误</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="title">
          <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
          <el-input
              type="textarea"
              rows="4"
              v-model="questionInfo.judgeQuestion.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
          </el-input>
        </div>
        <div class="submit">
          <el-button type="primary" @click="judgeSubmit()">立即添加</el-button>
        </div>
      </el-form>
    </div>
  </section>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {ElMessage} from "element-plus";

export default {
  name: "addQuestion",
  setup() {
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    let fillRef = ref(null)
    let judgeRef = ref(null)
    let questionInfo = reactive({//试题信息
      paper: [], //题库
      optionValue: '选择题', //题型选中值
      questionType: [ //题库类型
        {
          value: '选择题',
          label: '选择题'
        },
        {
          value: '填空题',
          label: '填空题'
        },
        {
          value: '判断题',
          label: '判断题'
        },
      ],
      rights: [ //选择题正确答案
        {
          value: 'A',
          label: 'A'
        },
        {
          value: 'B',
          label: 'B'
        },
        {
          value: 'C',
          label: 'C'
        },
        {
          value: 'D',
          label: 'D'
        },
      ],
      choiceQuestion: {//选择题
        // eslint-disable-next-line no-undef
        questionCreatorId: $cookies.get('id').toString(),
        subject: null,//所属科目
        question: null,
        score: 3,//分数，默认3
        optionA: null,//选项A
        optionB: null,
        optionC: null,
        optionD: null,
        answer: null,//正确答案
        analysis: null//解析
      },
      fillQuestion: {
        // eslint-disable-next-line no-undef
        questionCreatorId: $cookies.get('id').toString(),
        subject: null,//该题所属科目
        question: '',//题目
        answer: '',//正确答案
        analysis: null,//解析
        score: 2//分数，默认为2
      },
      judgeQuestion: {
        // eslint-disable-next-line no-undef
        questionCreatorId: $cookies.get('id').toString(),
        subject: null,//该题所属科目
        question: null,//题目
        answer: null,//正确答案
        analysis: null,//解析
        score: 2//分数，默认为2
      },
    })
    let checkFillQuestion = (rule, value, callback) => {
      if (value.includes('（') || value.includes('）')) {
        callback(new Error('请输入英文括号'))
      } else {
        callback()
      }
    }
    let checkFillAnswer = (rule, value, callback) => {
      if (value.includes('，')) {
        callback(new Error('请输入英文逗号'))
      } else {
        callback()
      }
    }

    function choiceSubmit() {
      if (questionInfo.choiceQuestion.score === null) {
        questionInfo.choiceQuestion.score = 3
      } else if (!new RegExp('^[1-9][0-9]*$').test(questionInfo.choiceQuestion.score)) {
        ElMessage({
          type: 'error',
          message: '分数必须为正整数',
        })
      }
      if (questionInfo.choiceQuestion.subject === null) {
        ElMessage({
          type: 'error',
          message: '请输入所属科目',
        })
        return
      }
      if (questionInfo.choiceQuestion.answer === null) {
        ElMessage({
          type: 'error',
          message: '请选择正确的答案',
        })
        return
      }
      proxy.$axios.post(
          `/manage/choice/add`,
          {...questionInfo.choiceQuestion}
      ).then(
          response => {
            if (response.data) {
              ElMessage({
                type: 'success',
                message: '已添加到题库',
              })
              router.push({path: '/manage'})
            }
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }

    function fillSubmit() {
      proxy.$refs.fillRef.validate((valid) => {
        if (valid) {
          if (questionInfo.fillQuestion.score === null) {
            questionInfo.fillQuestion.score = 2
          } else if (!new RegExp('^[1-9][0-9]*$').test(questionInfo.fillQuestion.score)) {
            ElMessage({
              type: 'error',
              message: '分数必须为正整数',
            })
            return
          }
          if (questionInfo.fillQuestion.subject === null) {
            ElMessage({
              type: 'error',
              message: '请输入所属科目',
            })
            return
          }
          proxy.$axios.post(
              `/manage/fill/add`,
              {...questionInfo.fillQuestion}
          ).then(
              response => {
                if (response.data) {
                  ElMessage({
                    type: 'success',
                    message: '已添加到题库',
                  })
                  router.push({path: '/manage'})
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        } else {
          return false
        }
      })
    }

    function judgeSubmit() {
      proxy.$refs.judgeRef.validate((valid) => {
        if (valid) {
          if (questionInfo.judgeQuestion.score === null) {
            questionInfo.judgeQuestion.score = 2
          } else if (!new RegExp('^[1-9][0-9]*$').test(questionInfo.judgeQuestion.score)) {
            ElMessage({
              type: 'error',
              message: '分数必须为正整数',
            })
            return
          }
          if (questionInfo.judgeQuestion.subject === null) {
            ElMessage({
              type: 'error',
              message: '请输入所属科目',
            })
            return
          }
          proxy.$axios.post(
              `/manage/judge/add`,
              {...questionInfo.judgeQuestion}
          ).then(
              response => {
                if (response.data) {
                  ElMessage({
                    type: 'success',
                    message: '已添加到题库',
                  })
                  router.push({path: '/manage'})
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        } else {
          return false
        }
      })
    }

    return {
      fillRef,
      judgeRef,
      questionInfo,
      checkFillAnswer,
      checkFillQuestion,
      choiceSubmit,
      fillSubmit,
      judgeSubmit
    }
  }
}
</script>

<style scoped>
.append {
  margin: 0px 20px;
}

.append ul {
  display: flex;
  align-items: center;
}

.append ul li {
  margin-right: 20px;
}

.append .change {
  margin-top: 20px;
  padding: 20px 16px;
  background-color: #E7F6F6;
  border-radius: 4px;
}

.append .change .title {
  padding-left: 6px;
  color: #2f4f4f;
}

.append .change .title span:nth-child(1) {
  margin-right: 6px;
}

.append .change .title .answer {
  margin: 20px 0px 20px 8px;
}

.append .change .title .el-textarea {
  width: 98% !important;
}

.append .change .options ul {
  display: flex;
  flex-direction: column;
}

.append .change .options ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 98%;
  margin: 10px 0px;
}

.append .change .options ul li span {
  margin-right: 20px;
}

.append .change .submit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.append .fill .fillAnswer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.append .fill .fillAnswer span {
  margin-left: 6px;
}

.append .fill .fillAnswer el-input {
  width: 91% !important;
}

.append .fill .analysis {
  margin-top: 20px;
  margin-left: 5px;
}

.append .judge .judgeAnswer {
  margin-left: 20px;
  margin-bottom: 20px;
}

.append .w150 {
  width: 150px;
}

.append li:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>